<template>
  <div class="blogs-container">
    <div class="category-box">
      <p
        class="cate-item"
        :class="activeCateIndex == -1 ? 'active-cate' : ''"
        @click="clickCategory(-1, -1)"
      >
        推荐
      </p>
      <p
        class="cate-item"
        v-for="(item, index) in categoryList"
        :key="item.id"
        @click="clickCategory(index, item.id)"
        :class="activeCateIndex == index ? 'active-cate' : ''"
      >
        {{ item.name }}
      </p>
    </div>

    <ul class="content">
      <li
        class="content-item"
        v-for="blog in blogsList"
        :key="blog.id"
        @click="goBlogDetail(blog.id)"
      >
        <el-card shadow="hover">
          <h3>{{ blog.title }}</h3>
          <p class="desc">
            <span class="nick-name">{{ blog.username }}</span>
            <span class="info">{{ blog.description }}</span>
          </p>
        </el-card>
      </li>
    </ul>
    <div class="other">
      <div>
        <h4>相关链接</h4>
        <p v-for="item in linkList" :key="item.id">
          <a :href="item.url" target="_blank">{{item.name}}</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import blogsApi from "@/api/blogs";
export default {
  name: "blogs",
  data() {
    return {
      activeCateIndex: -1,
      categoryList: [],
      blogsList: [],
      linkList:[]
    };
  },
  created() {
    this.getCateList();
    this.getBlogsList(-1);
    this.getLinkList()
  },
  methods: {
    getLinkList() {
      blogsApi.getLinks().then(({data:res})=>{
        if(res.code === 200){
          this.linkList = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    getCateList() {
      blogsApi
        .getCateOne()
        .then(({ data: res }) => {
          if (res.code === 200) {
            this.categoryList = res.data.list;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickCategory(index, categoryId) {
      this.activeCateIndex = index;
      this.getBlogsList(categoryId);
    },
    getBlogsList(id) {
      blogsApi
        .getListByCateId(id)
        .then(({ data: res }) => {
          if (res.code === 200) {
            this.blogsList = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goBlogDetail(id) {
      this.$router.push({
        path: "/blog",
        query: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.blogs-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.category-box::-webkit-scrollbar {
  width: 0;
}
.category-box {
  overflow-y: auto;
  width: 10%;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  padding: 5px 0;
}
.cate-item {
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
}
.active-cate {
  color: #409eff;
}
.content::-webkit-scrollbar {
  width: 0;
}
.content {
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  width: 70%;
  height: calc(100vh - 160px);
  padding: 20px;
  margin: 0 30px;
  .content-item {
    cursor: pointer;
    width: 100%;
    margin: 8px 0;
    .desc {
      color: #666;
      font-size: 14px;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .nick-name {
        margin-right: 10px;
      }
    }
  }
}

.other {
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  width: 20%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  p{
    margin: 5px;
  }
}
</style>